<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
        <title>Slider: Labels</title>
	</head>
	<body>
		<script type="text/javascript" charset="utf-8">
			var ui = webix.ui({
				padding: 20,
				cols:[
					{},
					{
						width:450,
						rows:[
							{view:"form", id:"myform",   elements:[
								{ view:"slider", label:"Slider 1", value:"20", name:"s1",
									title:webix.template("Selected: #value#")},

								{ view:"slider", label:"Slider 2", value:"50", name:"s2",
									title:function(obj){
										var text = obj.value > 20 ? "Minimum level reached. " : "";
										return text + "Value: "+ obj.value;
									}
								},


								{ view:"slider", label:"Slider 3", value:"80", name:"s3",
									title:"Initial state",
									on:{
										onChange:function(){
											this.define("title", "Final value " + this.getValue());
											this.refresh();
										},
										onSliderDrag:function(){
											this.define("title", "Dragging... Currently "+this.getValue());
											this.refresh();
										}
									}
								}
							]},
							{view:"form", id:"myform2", elements:[
								{
									type:"clean",
									cols:[
										{},
										{ view:"button", type: "form", id:"slider_set", label:"Set values", click:"set()",  align:"right" },
										{ view:"button", id:"slider_get", label:"Get values", click:"get()",  align:"left" }
									]
								},
								{ view: "fieldset", label:"Data", body:{
									//view:"form",
									rows:[
										{ view:"text", label:"Value 1", value:"0", name:"s1"},
										{ view:"text", label:"Value 2", value:"100", name:"s2"},
										{ view:"text", label:"Value 3", value:"12", name:"s3"}
									]
								}}
							]}
						]
					},
					{}
				]

			});

			function set(){
				var data = $$('myform2').getValues();
				$$('myform').setValues(data);
			};
			function get(){
				var data = $$('myform').getValues();
				$$('myform2').setValues(data);
			};

/*

		var ui = webix.ui({
			view:"form", id:"myform", elements:[
				{ view:"slider", label:"Level", value:"20", min: 10, max: 70, name:"s1", 
					title:webix.template("Selected: #value#")},

				{ view:"slider", label:"Level", value:"50", name:"s2",
					title:function(obj){
						var text = obj.value > 20 ? "Minimum level reached. " : "";
						return text + "Value: "+ obj.value;
					}
				},


				{ view:"slider", label:"Level", value:"80", name:"s3",
					title:"Initial state",
					on:{
						onChange:function(){
							this.define("title", "Final value " + this.getValue());
							this.refresh();
						},
						onSliderDrag:function(){
							this.define("title", "Dragging... Currently "+this.getValue());
							this.refresh();
						}
					}
				},
                {
                    type:"clean",
                    cols:[
                        { view:"button", id:"slider_set", label:"Set", click:"set()", inputWidth: 200, align:"right" },
                        { view:"button", id:"slider_get", label:"Get", click:"get()", inputWidth: 200, align:"left" }
                    ]
                }
			]
		});

		function set(){
			$$('myform').setValues({
				s1:"0", s2:"100", s3:"12"
			});
		};
		function get(){
			var data = $$('myform').getValues();
			webix.message(data.s1);
			webix.message(data.s2);
			webix.message(data.s3);
		};*/
		</script>
		
	</body>
</html>